/* eslint-disable react/no-array-index-key */
import styles from './index.module.less'
import { useEffect, useRef, useState } from 'react'
import { useInViewport } from 'ahooks'
import type { SwiperItemProps, TeacherReportData } from '../../interface'

interface Props extends SwiperItemProps, Pick<TeacherReportData, 'region_student_module'> {}

interface Content {
    index?: number
    /** 班级总数 */
    group_num: number
    /** 学员数 */
    student_num: number
    /** 地区名称 */
    region: string
}

const ContentCard = (props: Content) => {
    return (
        <div
            className={
                props.index! % 2 === 0
                    ? styles.page_content_leftCard
                    : styles.page_content_rightCard
            }
        >
            <p className={styles.title}>{props.region}</p>
            <p>
                {`${props.group_num}期班级`}
                <span>·</span>
                {`${props.student_num}名学员`}
            </p>
        </div>
    )
}

export const FourthPage = (props: Props) => {
    const [data, setData] = useState<TeacherReportData['region_student_module']>([])

    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })

    useEffect(() => {
        if (!isActive && !inViewport) return
        setData([])

        let count = 0
        props?.region_student_module?.map(item => {
            count++
            setTimeout(() => {
                setData(oldData => {
                    return [...oldData, item]
                })
            }, count * 750)
        })
    }, [isActive, inViewport, props.region_student_module])

    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page}>
            <div className={styles.louImage} />
            <div className={styles.footOneImage} />
            <div className={styles.footTwoImage} />

            <div className={styles.page_top}>
                <p>这一年</p>
                <p>这些地方留下了您一路培育、鼓励的足迹</p>
            </div>

            <div className={styles.page_content}>
                {data.map((item, index) => {
                    if (index > 2) return null
                    return (
                        <div
                            key={index}
                            className={
                                index % 2 === 0
                                    ? styles.page_content_leftBox
                                    : styles.page_content_rightBox
                            }
                        >
                            <ContentCard index={index} {...item} />
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default FourthPage
